<template>

    <div class="scan-modal" :class="{ 'show' : isShow  }" >
        <div class="modal_container">
            <div class="modal_close"  >
                <img src="@/assets/img/icon/close.png" class="icon" alt="icon"
                @click="closeModal()" />
            </div>
            <div class="modal_title">
                <h2>请扫描护士工牌</h2>
            </div>
            <div class="modal_content">
                <textarea rows="3" cols="20"></textarea>
                
            </div>
        </div>
    </div>

</template>

<script lang="ts">
    import {
        Component,
        Prop,
        Vue,
        Watch
    } from 'vue-property-decorator';

    @Component
    

    export default class Scan extends Vue {
        @Prop({ 
            type: Boolean,
            required: false, 
            default: '' 
        }) toScanBlock !: Boolean; 

        isShow=this.toScanBlock;
        @Watch('toScanBlock') 
        ontoScanBlockChanged(val: boolean, oldVal: boolean) {
            this.isShow=val;
           
        }

        created() {
            
        }
        
        closeModal () {
            this.isShow=false;
            this.$emit('closeModal',this.isShow);
          
        }
    }
</script>


<style lang="scss" scoped>

    .scan-modal{
        @include modal_bg;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        z-index: $modal_index;
        display:none;
        .modal_container{
            height: 160px;
            width: 20%;           
            .modal_title{
                text-align:left;
                padding: 12px;
                h2{
                    color:#999;
                }
            }
            .modal_content{
                padding:0 12px;
                textarea{
                    margin-top: 20px;
                    height: 100px;
                    width: 100%;
                    margin: auto;
                    font-size:0.16rem;
                    border: 1px solid #999;
                }
            }
            .modal_close{
                img{
                    width: 45px;
                    position: absolute;
                    right: -18px;
                    top: -18px;
                }
            }
        }
    }

</style>